<template>
  <view class="login-container">
    <view class="login-box">
      <view class="welcome-text">
        <text class="title">欢迎登录</text>
        <text class="subtitle">请输入您的账号密码</text>
      </view>

      <view class="input-group">
        <uv-form :model="formData" ref="formRef" :rules="rules">
          <uv-form-item prop="username">
            <uv-input
              v-model="formData.username"
              placeholder="请输入用户名"
              prefixIcon="account"
              border="bottom"
            />
          </uv-form-item>

          <uv-form-item prop="password">
            <uv-input
              v-model="formData.password"
              placeholder="请输入密码"
              prefixIcon="lock"
              :password="!showPassword"
              border="bottom"
            >
              <template #suffix>
                <uv-icon
                  :name="showPassword ? 'eye-fill' : 'eye-off'"
                  size="20"
                  @click="togglePassword"
                />
              </template>
            </uv-input>
          </uv-form-item>
        </uv-form>
      </view>

      <uv-button
        type="primary"
        text="登录"
        @click="handleLogin"
        :customStyle="{
          background: 'linear-gradient(260deg, #98C7F9 0%, #54D3ED 100%)',
          color: '#ffffff',
        }"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

const formData = ref({
  username: "",
  password: "",
});
const uniCloudUsersManager = uniCloud.importObject("usersManager"); //建材表

const showPassword = ref(false);
const formRef = ref(null);
const rules = ref({
  username: {
    type: "string",
    required: true,
    message: "请填写账号",
    trigger: ["blur", "change"],
  },
  password: {
    type: "string",
    required: true,
    message: "请填写密码",
    trigger: ["blur", "change"],
  },
});
const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

// 添加页面加载时的检查函数
onMounted(() => {
  checkLoginStatus();
});

// 检查登录状态
const checkLoginStatus = () => {
  const userInfo = uni.getStorageSync("userInfo");
  if (userInfo) {
    uni.redirectTo({
      url: "/pages/index/index",
    });
  }
};

const handleLogin = async () => {
  try {
    const valid = await formRef.value.validate();
    if (valid) {
      console.log("表单验证通过", formData.value);
      let res = await uniCloudUsersManager.loginUser(formData.value);

      if (res.code == 0) {
        // 存储用户信息
        uni.setStorageSync("userInfo", res.data);
        // 跳转到首页
        uni.redirectTo({
          url: "/pages/index/index",
        });
      }else{
        uni.showToast({
          title: res.message,
          icon: "none",
        });
      }
    }
  } catch (error) {
    console.log("表单验证失败");
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  min-height: 100vh;
  background: linear-gradient(260deg, #98c7f9 0%, #54d3ed 100%);
  padding: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  .login-box {
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24rpx;
    padding: 60rpx 40rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    margin-top: -15vh;

    .welcome-text {
      text-align: center;
      margin-bottom: 60rpx;

      .title {
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 16rpx;
        display: block;
      }

      .subtitle {
        font-size: 28rpx;
        color: #666;
      }
    }

    .input-group {
      margin-bottom: 60rpx;
    }
  }
}

:deep(.uv-button) {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
}

:deep(.uv-input) {
  height: 88rpx;
  font-size: 32rpx;
}
</style>
